@import "element-plus/theme-chalk/dark/css-vars.css";
@import "@/scss/responsive";
@import "@/scss/common";

/**
 * 设置昼夜模式下使用的颜色
 *
 * @author Himmelbleu
 * @date 2023 年 2 月 14 日
 * @url https://www.cnblogs.com/Himmelbleu/#/
 */
html[class="dark"] {
  --l-pri-color: #a7a7a7;
  --l-sec-color: #8d9095;
  --l-thr-color: #878787;
  // 卡片、盒子背景颜色
  --l-box-bg: #191919;
  // 文本域背景颜色
  --l-textarea-bg: #202020;
  // 代码块背景颜色
  --l-precode-bg: #1f1f1f;
  // 行内代码块背景颜色
  --l-code-bg: #2b2b2b;
  // 分界线背景颜色
  --l-divider-bg: #464646;
  // 选中的文字颜色
  --l-selection-bg: white;
  // 模态框背景颜色
  --l-modal-bg: #0d0d0d;
  // strip 条背景颜色
  --l-strip-bg: #7f7f7f;
  // highlight
  --hljs-color: #abb2bf;
  --hljs-bg: #282c34;
  --hljs-comment-color: #5c6370;
  --hljs-keyword: #c678dd;
  --hljs-section: #e06c75;
  --hljs-literal: #56b6c2;
  --hljs-addition: #98c379;
  --hljs-attr: #d19a66;
  --hljs-bullet: #61aeee;
  --hljs-built: #e6c07b;
}

html[class="light"] {
  --l-pri-color: #393939;
  --l-sec-color: #4e4e4e;
  --l-thr-color: #707070;
  // 卡片、盒子背景颜色
  --l-box-bg: #ffffff;
  // 文本域背景颜色
  --l-textarea-bg: #fafafa;
  // 代码块背景颜色
  --l-precode-bg: #fafafa;
  // 行内代码块背景颜色
  --l-code-bg: #fafafa;
  // 分界线背景颜色
  --l-divider-bg: #e3e3e3;
  // 选中的文字颜色
  --l-selection-bg: #393939;
  // 模态框背景颜色
  --l-modal-bg: #353535;
  // strip 条背景颜色
  --l-strip-bg: #d5d5d5;
  // highlight
  --hljs-color: #383a42;
  --hljs-bg: #fafafa;
  --hljs-comment-color: #a0a1a7;
  --hljs-keyword: #a626a4;
  --hljs-section: #e45649;
  --hljs-literal: #0184bb;
  --hljs-addition: #50a14f;
  --hljs-attr: #986801;
  --hljs-bullet: #986801;
  --hljs-built: #986801;
}

/**
 * 覆盖 element-plus 样式
 *
 * @author Himmelbleu
 * @date 2023 年 1 月 15 日
 * @url https://www.cnblogs.com/Himmelbleu/#/
 */

:root {
  --el-text-color-regular: var(--l-pri-color) !important;
  --el-text-color-primary: var(--l-pri-color) !important;
  --el-color-primary: var(--l-theme-color) !important;
  --el-border-radius-base: 0.5rem !important;
}

.el-input__inner,
.el-button {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif !important;
}

.el-input__inner {
  font-size: 0.9rem !important;
}

.el-rate__icon {
  margin: 0 !important;
}

/**
 * highlightjs 样式
 *
 * @author Himmelbleu
 * @date 2023 年 1 月 16 日
 * @url https://www.cnblogs.com/Himmelbleu/#/
 */

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

.hljs {
  color: var(--l-pri-color);
  background: var(--hljs-bg);
}

.hljs-comment,
.hljs-quote {
  color: var(--hljs-comment-color);
  font-style: italic;
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword {
  color: var(--hljs-keyword);
}

.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
  color: var(--hljs-section);
}

.hljs-literal {
  color: var(--hljs-literal);
}

.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  color: var(--hljs-addition);
}

.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
  color: var(--hljs-attr);
}

.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
  color: var(--hljs-bullet);
}

.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_ {
  color: var(--hljs-built);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

.hljs-link {
  text-decoration: underline;
}

/**
 * 设置所有元素共有的样式
 *
 * @author Himmelbleu
 * @date 2023 年 2 月 14 日
 * @url https://www.cnblogs.com/Himmelbleu/#/
 */

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--l-box-bg);
  color: var(--l-pri-color);
  font-size: var(--font-size);
  font-weight: 400;
  &::-webkit-scrollbar {
    display: none;
  }
}

* {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 1px;
  scroll-behavior: smooth;
  word-break: break-all;
  line-break: anywhere;
  box-sizing: border-box;
}

#app {
  --at-apply: f-c-c;
}

img {
  max-width: 100%;
  --at-apply: rd-2;
  object-fit: cover;
}

a {
  color: var(--l-pri-color);
}

a:link {
  text-decoration: none;
}

::selection {
  color: var(--l-selection-bg);
  background: var(--el-color-primary);
}

::-webkit-scrollbar {
  width: 0.15rem;
  height: 0.15rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--l-divider-bg);
}
